<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <img src="../../../assets/images/logo/logo4.png" alt="" class="hidden-sm-and-down">
        <img src="../../../assets/images/logo/logo1.png" alt="" class="hidden-md-and-up">
      </el-col>
      <el-col :span="13.5" class="hidden-sm-and-down">
        <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" text-color="#fff"
          active-text-color="#8db83c" :router="true" :unique-opened="true"
          :class="{bg1:!this.$store.state.headState,bg2:this.$store.state.headState}">
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/about1/introduce">关于懒精灵</el-menu-item>

          <el-menu-item index="/details3" v-if="$route.path == '/details3' ">艺术涂料与墙艺</el-menu-item>
          <el-menu-item index="/details2" v-else-if="$route.path == '/details2'">艺术涂料与墙艺</el-menu-item>
          <el-menu-item index="/details" v-else>艺术涂料与墙艺</el-menu-item>
          
          <el-menu-item index="/join2" v-if="$route.path == '/join2'">培训加盟</el-menu-item>
          <el-menu-item index="/join" v-else>培训加盟</el-menu-item>

          <el-menu-item index="/dynamic3" v-if="$route.path == '/dynamic3'">动态</el-menu-item>
          <el-menu-item index="/dynamic" v-else-if="$route.path == '/dynamic'">动态</el-menu-item>
          <el-menu-item index="/dynamic" v-else>动态</el-menu-item>

          <el-menu-item index="/contact">联系</el-menu-item>
          <!-- <el-submenu index="/about1/introduce" ref="bg">
            <template slot="title">关于懒精灵</template>
            <el-menu-item index="/about1/introduce">公司介绍</el-menu-item>
            <el-menu-item index="/about1/culture">品牌文化</el-menu-item>
            <el-menu-item index="/about1/duty">健康责任</el-menu-item>
            <el-menu-item index="/about1/qualifications">荣誉资质</el-menu-item>
            <el-menu-item index="/about1/croe">美学中心</el-menu-item>
          </el-submenu>
          <el-submenu index="/details">
            <template slot="title">艺术涂料与墙艺</template>
            <el-menu-item index="/details">艺术涂料</el-menu-item>
            <el-menu-item index="/details2">墙体彩绘</el-menu-item>
            <el-menu-item index="/details3">墙体浮雕</el-menu-item>
          </el-submenu>
          <el-submenu index="/join">
            <template slot="title">培训加盟</template>
            <el-menu-item index="/join">培训中心</el-menu-item>
            <el-menu-item index="/join2">加盟懒精灵</el-menu-item>
          </el-submenu>
          <el-submenu index="/dynamic">
            <template slot="title">动态</template>
            <el-menu-item index="/dynamic">案例</el-menu-item>
            <el-menu-item index="/dynamic2">加盟</el-menu-item>
            <el-menu-item index="/dynamic3">新闻</el-menu-item>
          </el-submenu>
          <el-submenu index="/contact">
            <template slot="title">联系</template>
            <el-menu-item index="/contact">品牌总部</el-menu-item>
            <el-menu-item index="/contact">售后支持</el-menu-item>
            <el-menu-item index="/contact">培训支持</el-menu-item>
          </el-submenu> -->
        </el-menu>
      </el-col>
      <el-col :span="13.5" class="hidden-md-and-up ">
        <span class="iconfont icon-daohanglan"></span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import './base.css'
export default {
  data () {
    return {
      url: null,
      bg: '#007455'
    };
  },
  methods: {
    //获取数据http://www.codefly.top/#/home
    async getData () {
      const { data: ret } = await this.$http.get('/static/img.json')
      console.log(ret.logo[0].url)
      console.log(this.$route.path+2)
      this.url = ret.logo[0].url
    },
    BG () {
      if (!this.$store.state.headState) {
        this.bg = '#007455'
      } else {
        this.bg = '#000'
      }
    },
  },
  mounted () {
    this.getData()
  },
  watch: {
    bg: function (val) {
      this.bg = this.$store.state.color
      console.log(val)
    }
  }
}
</script>

<style lang='less' scoped>
.bg1 {
  background-color: #007455 !important;
}
.bg2 {
  background-color: #000 !important;
}
.el-row {
  align-items: center;
  .iconfont {
    font-size: 1.6rem;
    color: #fff;
    cursor: pointer;
  }
}
.el-submenu__title {
  font-size: 16px;
}
@media only screen and(max-width:992px){
  .el-row{
    padding: 0 1rem;
  }
}
</style>